/**
 * @file 项目首页页面
 * @author wangshaozhi(wangshaozhi@baidu.com)
 */

import {useCallback, useEffect, useMemo, useState} from 'react';
import {observer} from 'mobx-react';
import {Redirect, Route, Switch, useHistory} from 'react-router-dom';
import {
    Layout,
    Menu
} from 'antd';

// types
import type {MenuProps} from 'antd';
import type {MenuInfo} from 'rc-menu/lib/interface';

import {
    BookOutlined,
    FileAddOutlined,
    MessageOutlined,
    PieChartOutlined,
    SoundOutlined
} from '@ant-design/icons';

import {MainStore} from '../../store/mainStore';
import {Message} from './Message';
import {Workbench} from './Workbench';
import {useTitle} from 'react-use';

// components
import {ArticleManagement} from './ArticleManagement';
import {TopHeader} from './Header';

// style
import cls from './index.module.scss';

const {Content, Sider, Footer, Header} = Layout;

type MenuItem = Required<MenuProps>['items'][number];

const getItem = (
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
): MenuItem => ({
    key,
    icon,
    children,
    label
} as MenuItem);

const items: MenuItem[] = [
    getItem('工作台', 'index', <PieChartOutlined />),
    getItem('文章管理', 'article', <BookOutlined />, [
        getItem('添加文章', 'add', <FileAddOutlined />),
        getItem('发布文章', 'publish', <SoundOutlined />)
    ]),
    getItem('留言管理', 'message', <MessageOutlined />)
];

export const Home = observer(() => {
    const [collapsed, setCollapsed] = useState(false);
    const history = useHistory();
    const store = useMemo(() => new MainStore(), []);
    const {sideBarStore} = store;
    useTitle('工作台');

    useEffect(() => {
        sideBarStore.initSelectKeys(history.location.pathname);
    }, [history.location.pathname, sideBarStore]);

    const onMenuSelect = useCallback((item: MenuInfo) => {
        const path = '/' + item.keyPath.reverse().join('/');
        history.push(path);
    }, [history]);

    const renderWorkBenchComponent = useCallback(() => (
        <Workbench store={store} />
    ), [store]);

    const renderArticleMgtComponent = useCallback(() => (
        <ArticleManagement store={store} />
    ), [store]);

    const renderMessageComponent = useCallback(() => (
        <Message />
    ), []);

    const menuOpenChangeHandler = useCallback((openKeys: string[]) => {
        sideBarStore.update({
            currOpenKeys: openKeys
        });
    }, [sideBarStore]);

    return (
        <Layout style={{minHeight: '100vh'}}>
            <Sider
                collapsible
                collapsed={collapsed}
                onCollapse={value => setCollapsed(value)}
            >
                <div className={cls.logo}>
                    <BookOutlined />
                    {!collapsed && (
                        <span className={cls.title}>
                            博客后台管理系统
                        </span>
                    )}
                </div>
                <Menu
                    theme="dark"
                    defaultSelectedKeys={['index']}
                    selectedKeys={sideBarStore.currSelectedKeys}
                    openKeys={sideBarStore.currOpenKeys}
                    mode="inline"
                    items={items}
                    onSelect={onMenuSelect}
                    onOpenChange={menuOpenChangeHandler}
                />
            </Sider>
            <Layout className="site-layout">
                <Header style={{padding: 0}}>
                    <TopHeader />
                </Header>
                <Content
                    className={cls.contentWrapper}
                    style={{margin: '24px'}}
                >
                    <div
                        className={cls.content}
                        style={{padding: 24, minHeight: 360}}
                    >
                        <Switch>
                            <Route path="/index" component={renderWorkBenchComponent} />
                            <Route path="/article" component={renderArticleMgtComponent} />
                            <Route path="/message" component={renderMessageComponent} />
                            <Redirect to="/index" />
                        </Switch>
                    </div>
                </Content>
                <Footer
                    style={{textAlign: 'center'}}
                >
                    博客后台管理系统 ©{new Date().getFullYear()} Created by wangshaozhi
                </Footer>
            </Layout>
        </Layout>
    );
});